import Taro, {
  Component
} from '@tarojs/taro'
import {
  View,
  Text
} from '@tarojs/components'
import './goodsDetail.css'
import {
  AtIcon,
  AtTabs,
  AtTabsPane
} from 'taro-ui'

export default class GoodsDetail extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: {}
    }
  }
  config = {
    navigationBarTitleText: '商品详情页'
  }

  // 页面被载入
  componentWillMount() {
    this.render();
  }

  // 页面渲染完成 
  componentDidMount() {}

  // 页面展示出来 
  componentDidShow() {}

  // 页面被隐藏 
  componentDidHide() {}

  render() {
    return (
      <View className='index'>
          <View className='detail-header at-row'>
            <View className='at-col at-col-1'>
              <AtIcon size='30' value='chevron-left' color='#FFF'></AtIcon>
            </View>
            <View className='at-col at-col-10'>
              <Text>商品详情</Text>
            </View>
            <View className='at-col at-col-1'>
              <AtIcon size='27' value='shopping-cart' color='#FFF'></AtIcon>
            </View>
          </View>
          <View className='detail-swiper'></View>
          <View className='at-row at-row--wrap detail-info'>
            <View className='at-col at-col-12 detail-name'>老布特 木糖醇</View>
            <View className='at-col at-col-12 detail-price'>￥100.00/件</View>
          </View>
          <View className='at-row detail-norms'>
            <View className='at-col at-col-10'>
              <View className='at-row'>
                <View className='at-col at-col-4'>
                  <View className='at-row at-row--wrap choice-norms'>
                    <View className='at-col-12'>
                      <AtIcon value='filter' size='24' color='#CCC'></AtIcon>
                    </View>
                    <View className='at-col-12'>规格选择</View>
                  </View>
                </View>
                <View className='at-col at-col-8'></View>
              </View>
            </View>
          </View>
          <View className='detail-inner'>
            <AtTabs
              current={this.state.current}
              tabList={[
                { title: '产品介绍' },
                { title: '产品附件' }
              ]}
              onClick={this.handleClick}>
              <AtTabsPane current={this.state.current} index={0}>
                <View className='tab-content'>产品参数</View>
              </AtTabsPane>
              <AtTabsPane current={this.state.current} index={1}>
                <View className='tab-content'>标签页二的内容</View>
              </AtTabsPane>
            </AtTabs>
          </View>
          <View className='detail-footer at-row'>
            <View className='at-col at-col-7'>
              <AtIcon size='30' value='star' color='#CCC'></AtIcon>
            </View>
            <View className='at-col at-col-5 put-in-cart'>加入购物车</View>
          </View>
      </View>
    )
  }
}